<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" class="my-form-model">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" layout="vertical" >
                    <a-form-model-item style="display: none">
                        <a-input v-model="mdl.id"/>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item  :label="$ti18('rxForm.name','名称')" prop="name">
                                <a-input @blur.native="getPinyinByName" :placeholder="$ti18('rxForm.name','名称','','input')" v-model="mdl.name"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item  :label="$ti18('rxForm.rxAlias', '别名')" prop="alias">
                                <a-input :placeholder="$ti18('rxForm.rxAlias', '别名')" v-model="mdl.alias"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item  :label="i18n('form.regularEx','正则表达式')"
                                               prop="regular">
                                <a-textarea :placeholder="i18n('form.regularEx','正则表达式')" v-model="mdl.regular" :rows="4"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item  :label="i18n('form.cue','提示语')"
                                               prop="prompt">
                                <a-textarea :placeholder="i18n('form.cue','提示语')" v-model="mdl.prompt" :rows="4"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import FormRuleApi from '@/api/form/core/formRule'
    import {BaseFormModel, RxDialog} from "@lowcode/jpaas-common-lib";

    export default {
        name: 'FormRuleEdit',
        mixins: [BaseFormModel],
        components: {
            RxDialog,
        },
        data() {
            return {
                rules: {
                    name: [{required: true, message: this.$ti18('rxForm.name','名称','','input'), trigger: 'change'}],
                    prompt: [{required: true, message: this.i18n('form.cue','提示语','input'), trigger: 'change'}],
                    alias: [
                        {required: true, message: this.$ti18('rxForm.rxAlias', '别名','','input'), trigger: 'change'},
                        {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                    ],
                    regular: [{required: true, message: this.i18n('form.regularEx','正则表达式','input'), trigger: 'change'}],
                }
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "formRule", key);
            },
            i18n2(name,text,key){
                return this.$ti18(name,text,"formBoEntity",key);
            },
            get(id) {
                return FormRuleApi.get(id);
            },
            save(values) {
                return FormRuleApi.save(values);
            },
            getPinyinByName(){
                let name=this.mdl.name
                if (!name){
                    return;
                }
                if (this.mdl.alias){
                    return;
                }
                this.getPinyin(name).then(res => {
                    //去除不可见的特殊符号
                    if(res){
                        res=res.replace(/\u200B/g,'');
                    }
                    this.$set(this.mdl,"alias",res)
                })
            }


        }
    }
</script>
<style scoped>
.my-form-model >>> .ant-form-vertical .ant-form-item{
    margin-bottom: 10px;
}
</style>
